﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<CollaborationRoom>" %>
<%@ Import Namespace="ViewRes" %>
<div>
    <div id="slider" style="height: 200px; position: absolute;"/>
    <div id="scaleContainer"/>
    <script src="<%:Url.Content("~/Scripts/jquery-ui-1.8.7.custom.min.js")%>" type="text/javascript"> </script>
    <script src="<%:Url.Content("~/Scripts/jquery.smoothDivScroll-1.1.js")%>" type="text/javascript"> </script>
    <script src="<%:Url.Content("~/Scripts/jquery.bubblepopup.v2.3.1.min.js")%>" type="text/javascript"> </script>
    <script src="<%:Url.Content("~/Scripts/jquery.ui.mouse.js")%>" type="text/javascript"> </script>
    <script src="<%:Url.Content("~/Scripts/jquery.ui.slider.js")%>" type="text/javascript"> </script>

    <style type="text/css">
        .makeMeScrollable
        {
            width: 100%;
            height: 150px;
            position: relative;
        }
        
        .makeMeScrollable div.scrollableArea
        {
            position: relative;
            float: left;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">

        $(function() {
            $("#slider").slider({
                    orientation: "vertical",
                    value: 150,
                    min: 80,
                    max: 300,
                    step: 20,
                    change: function(event, ui) {
                        loadPlanings(ui.value);
                    }
                });

            loadPlanings();
        });


        function loadPlanings(scale) {
            var path = '<%:Url.RouteUrl("Default", new {controller = "TimeLine", action = "GetTimeLinesContainers"})%>';
            $("#timeLinesContainer").load(path, function() {
                $(".planingContainer").each(function() {
                    <% if (Model != null && Model.AllowAccess(ViewData["LoggedUser"] as User)){%>
                            path = '<%:Url.RouteUrl("Default", new {controller = "TimeLine", action = "ForRoom"})%>' + '?id=<%:Model.CollaborationRoomId%>';
                    <% } %>
                    <% else if (ViewData["LoggedUser"] is SystemManager) {%>
                            path = '<%:Url.RouteUrl("Default", new {controller = "TimeLine", action = "ForSysManager"})%>' + '?';
                    <% } %>
                    <% else {%>alert ("else");
                    <% }%>
                    var innerDiv = $(this);
                    var planingtypeid = innerDiv.attr("planingtypeid");
                    path += '&planingTypeId=' + planingtypeid;
                    if (typeof levelId != "undefined")
                        path += '&levelId=' + levelId;
                    if (scale != null)
                        path += "&scale=" + scale;

                    $.ajax({
                            url: path,
                            async: false,
                            success: function(response) {
                                var scroller = innerDiv.parents().filter('.makeMeScrollable');
                                buildTimeLine(innerDiv, response);
                                var pixels;
                                var currentDateItem = $(innerDiv).find("#TimeLineCurrentDate");
                                pixels = currentDateItem.css("left");
                                if ((typeof pixels != 'undefined') && pixels != null) {
                                    pixels = parseInt(pixels.substring(0, pixels.length - 2), 10);
                                } else
                                    pixels = 0;
                                $(scroller).smoothDivScroll(
                                    {
                                        startAtElementId: "TimeLineCurrentDate"
                                    });
                                $(scroller).smoothDivScroll("move", pixels);
                            }
                        });
                });
            });
        }
        

        function buildTimeLine(div, data) {

            if (typeof data == 'undefined' || data == null || data.length == 0) {
                return false;
            }
            $("<div></div>").css({ display: 'inline-block', width: 100, height: 4 }).appendTo(div);
            $(data).each(function() {
                switch (this.Type) {
                case "GlobalTask":
                    var pointHtml = "<div class='TimeLinePoint' style='left:" + (parseInt(this.MarginLeft) + 95).toString() + "px;' onclick=\"loadTaskInfo($(this),\'" + this.TaskId + "\');\"></div>";
                    var pointDateHtml = "<div class='TimeLinePointDate' style='left:" + (parseInt(this.MarginLeft) + 95).toString() + "px;'>" + this.StartDate + "</div>";
                    var connectorHtml = "";
                    if (this.Connector != null)
                        connectorHtml = "<div class='TimeLineConnector' style='width:" + this.Connector.Width + "px;background-color:" + this.Connector.Color + "'></div>";
                    $(div).append(pointHtml + pointDateHtml + connectorHtml);
                    break;
                case "MonthsSeparator":
                    var monthsSeparatorHtml = "<div class='MonthsSeparator' style='left:" + (parseInt(this.MarginLeft) + 95).toString() + "px;'></div>";
                    var monthSeparatorDateHtml = "<div class='MonthsSeparatorDate' style='left:" + (parseInt(this.MarginLeft) + 95).toString() + "px;'>" + this.StartDate + "</div>";
                    $(div).append(monthsSeparatorHtml + monthSeparatorDateHtml);
                    break;
                case "Task":
                    var taskHtml = "<div class='TimeLineTask' style='left:" + (parseInt(this.MarginLeft) + 95).toString() + "px;' onclick=\"loadTaskInfo($(this),\'" + this.TaskId + "\');\"></div>";
                    var taskDateHtml = "<div class='TimeLineTaskDate' style='left:" + (parseInt(this.MarginLeft) + 95).toString() + "px;'>" + this.StartDate + "</div>";
                    var connectorHtml = "";
                    if (this.Connector != null)
                        connectorHtml = "<div class='TimeLineConnector' style='width:" + this.Connector.Width + "px;background-color:" + this.Connector.Color + "'></div>";
                    $(div).append(taskHtml + taskDateHtml + connectorHtml);
                    break;
                case "CurrentDate":
                    var currentDateHtml = "<div id='TimeLineCurrentDate' style='left:" + (parseInt(this.MarginLeft) + 95).toString() + "px;'><div><%:SharedStrings.Today%></div><div>" + this.StartDate + "</div></div>";
                    $(div).append(currentDateHtml);
                    break;
                }
            });
            $("<div></div>").css({ display: 'inline-block', width: 70, height: 4 }).appendTo(div);

            return true;
        }

        function loadTaskInfo(div, taskId) {
            $(div).RemoveBubblePopup();
            $(div).CreateBubblePopup(
                {
                    position: 'bottom',
                    afterHidden: function() {
                        $(div).RemoveBubblePopup();
                    },
                    themeName: 'black',
                    themePath: '<%:Url.Content("~/Content/BubblePopup/jquerybubblepopup-theme")%>',
                    selectable: true
                });
            <%if (ViewData["LoggedUser"] is SystemManager) {%>
             $.get('<%:Url.RouteUrl("Default", new {controller = "CheckPoints", action = "View"})%>'  + '?taskId=' + taskId , function(data) {
                $(div).SetBubblePopupInnerHtml(data, false);
            });
            <%} %>
            <%else if(ViewData["LoggedUser"] is Student || ViewData["LoggedUser"] is Lecturer ) {%>
            $.get('<%:Url.RouteUrl("Default", new {controller = "CheckPoints", action = "View"})%>' + '?taskId=' + taskId +'&collaborationRoomId=<%:Model.CollaborationRoomId%>', function(data) {
                $(div).SetBubblePopupInnerHtml(data, false);
            });
            <% }%>
            $(div).ShowBubblePopup();
        }
               
    </script>
    <div id="timeLinesContainer" style="margin: 1em auto; position: relative; text-align: left;
        width: 90%; height: 500px;">
    </div>
</div>
